<template>
  <view class="content">
  


    <view class="listBox">
      <view class="lists">
        <uni-list>
		
	
		
		<uni-list-item title="修改基础信息" note=""  showArrow
			:show-extra-icon="true" :extra-icon="extraIcon1"  clickable @click="itemClick(1)"/>
		<uni-list-item title="修改密码" note="" showArrow
			:show-extra-icon="true" :extra-icon="extraIcon1"  clickable @click="itemClick(2)"/>
		<uni-list-item title="删除账户" note="" showArrow
					:show-extra-icon="true" :extra-icon="extraIcon6"  clickable @click="itemClick(6)"/>	
		<uni-list-item title="用户协议" note="" showArrow
			:show-extra-icon="true" :extra-icon="extraIcon3"  clickable @click="itemClick(3)"/>
		<uni-list-item title="隐私协议" note="" showArrow
			:show-extra-icon="true" :extra-icon="extraIcon3"  clickable @click="itemClick(4)"/>	
		
		<uni-list-item title="退出登录" note="" showArrow
			:show-extra-icon="true" :extra-icon="extraIcon2"  clickable @click="itemClick(5)"/>	
			
	
        </uni-list>
		
      </view>
    </view>

  </view>
</template>

<script>
	import constant from '@/store/constant.js'
	
	const baseImageUrl=constant.baseImageUrl;
	import store from '@/store/index.js';//需要引入store
	export default {
		computed:{
			
			toolsContent(){
				return store.state.common.toolsContent
			},
		},
		components: {},
		onLoad() {
			
			this.$data.userInfo=JSON.parse(uni.getStorageSync("userInfo"))
			
		},
		
		data() {
			return {
				 userInfo:{},
				 extraIcon1: {
				          color: '#666666',
				          size: '22',
				          type: 'settings'
				        },
				        extraIcon2: {
				          color: '#666666',
				          size: '22',
				          type: 'arrow-left'
				        },
				        extraIcon3: {
				          color: '#666666',
				          size: '22',
				          type: 'info'
				        },
				        extraIcon4: {
				          color: '#666666',
				          size: '22',
				          type: 'email'
				        },
				        extraIcon5: {
				          color: '#666666',
				          size: '22',
				          type: 'gift'
				        },
						extraIcon6: {
						  color: '#666666',
						  size: '22',
						  type: 'closeempty'
						},
				imageUrl:baseImageUrl,
				dosign:"签到",
				cover: '../../static/pig.png',
				avatar: '../../static/pig.png',
				extraIcon: {
					color: '#4cd964',
					size: '22',
					type: 'gear-filled'
				},
				title: 'uni-fab',
				directionStr: '垂直',
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'horizontal',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff'
				},
				is_color_type: false,
				
			}
		},
		methods: {
			itemClick(type){
				let url="";
				switch(type){
					case 1:
						url="/pages/user/setting";
						
						
						break;
					case 2:
						url="/pages/user/settingPwd"
						
						break;
					case 3:
						url="/pages/login/agreement?id=1805793898451169280";
						break;
					case 4:
						url="/pages/login/agreement?id=1805869116850958336";
						break;
					case 5:
						url="/pages/login/login";
						uni.removeStorageSync('token');
						uni.removeStorageSync('userInfo');
						break;
					case 6:
						url="/pages/user/deleteUser?userId="+this.userInfo.userId;
						break;
			
					
				}
				uni.navigateTo({
					url:url
				})
			},
			trigger(e) {
				
				this.toolsContent[e.index].active = !e.item.active
				store.dispatch('toolsJump',e.item.value)
			},
			onClick(e) {
				console.log(JSON.stringify(this.userInfo));
				let url="/pages/user/setting?userId="+this.userInfo.userId+"&nickName="+this.userInfo.nickName+"&introduction="+this.userInfo.introduction;
				url+="&pwd="+this.userInfo.pwd;
				if(this.userInfo.age!=undefined){
					url+="&age="+this.userInfo.age;
				}
				if(this.userInfo.sex!=undefined){
					url+="&sex="+this.userInfo.sex;
				}
				if(this.userInfo.birthday!=undefined){
					url+="&birthday="+this.userInfo.birthday;
				}
				if(this.userInfo.portrait!=undefined){
					url+="&portrait="+this.userInfo.portrait;
				}
				
				console.log(url);
				uni.navigateTo({
					url:url
				})
			},
			
		}
	}
  // export default {
  //   data() {
  //     return {
  //       extraIcon1: {
  //         color: '#666666',
  //         size: '22',
  //         type: 'auth'
  //       },
  //       extraIcon2: {
  //         color: '#666666',
  //         size: '22',
  //         type: 'cart'
  //       },
  //       extraIcon3: {
  //         color: '#666666',
  //         size: '22',
  //         type: 'chatboxes'
  //       },
  //       extraIcon4: {
  //         color: '#666666',
  //         size: '22',
  //         type: 'email'
  //       },
  //       extraIcon5: {
  //         color: '#666666',
  //         size: '22',
  //         type: 'gift'
  //       },

  //     }
  //   },
  //   methods: {
  //     setFun() {
  //       uni.showToast({
  //         title: "点击设置",
  //         icon: "none"
  //       })
  //     },
  //     clickList() {
  //       uni.showToast({
  //         title: "点击列表",
  //         icon: "none"
  //       })
  //     }
  //   }
  // }
</script>

<style scoped>
  .content {
    background-color: #f5f5f5;
    height: 100vh;
  }

  /* 弧形背景 */
  .topBox {
    width: 100%;
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 60rpx 20rpx 20rpx;
    box-sizing: border-box;
  }

  .topBox::after {
    content: "";
    width: 140%;
    height: 200px;
    position: absolute;
    left: -20%;
    top: 0;
    z-index: -1;
    border-radius: 0 0 50% 50%;
    background: #00aaff;
  }

  /* 弧形背景 */
  
  .setbox {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .set-left {
    width: 18%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .txt {
    color: #fff;
    font-size: 30rpx;
  }

  .set-right .uni-icons {
    margin-right: 10rpx;
  }

  .users {
    margin-top: 20rpx;
    padding: 30rpx;
    box-sizing: border-box;
    height: 280rpx;
    background-color: #fff;
    box-shadow: 1px 10rpx 20rpx #ececec;
    border-radius: 12rpx;
  }

  .u-top {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 30rpx;
  }

  .users .u-top image {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    margin-right: 20rpx;
  }

  .u-top .tit {
    font-size: 30rpx;
    font-weight: 700;
    color: #333;
  }

  .u-bottom {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .u-item {
    text-align: center;
  }

  .u-item .u-tit {
    color: #757575;
    font-size: 26rpx;
    margin-top: 10rpx;
  }

  .u-item .num {
    color: #000000;
    font-size: 33rpx;
    font-weight: 700;
  }

  .bottomBox {
    padding: 20rpx;
    box-sizing: border-box;
  }

  .order-list {
    height: 200rpx;
    margin: -15rpx auto 0;
    padding: 30rpx;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 12rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .o-item {
    width: 25%;
    text-align: center;
  }

  .o-item image {
    width: 65rpx;
    height: 55rpx;
  }

  .o-item .tit {
    font-size: 28rpx;
    margin-top: 10rpx;
  }

  .listBox {
    height: 200rpx;
    margin: -10rpx auto 0;
    padding: 20rpx;
    box-sizing: border-box;
    border-radius: 12rpx;
  }
</style>